<!--
作者：王志鹏
优化物料编码组件的显示（暂定为此版本）
通过点击物料编码在选择编码后
组件显示的内容为（一个卡片包裹着4个文本框）
物料编码（可选）  物料名称（只读）  物料规格（只读）  物料单位（只读）
存入后端的数据为物料的id
在引入时需要导入 components/materialCode/index.vue
推荐组件的宽度为span:"20"
组件只能选择一个物料 如若多选则会提示 （多数据选择暂未制作）-->
<template>
<div>
    <el-col>
    <el-input placeholder="岗位" :size="size" :disabled="disabled"  :readonly="readonly" style="line-hight:40px" v-model="postId" class="input-with-select">
      <el-button slot="append" :disabled="disabled"  :readonly="readonly" @click="showpostDialog" icon="el-icon-search"></el-button>
    </el-input>
    </el-col>
    <post-Dialog ref="postDialog" @doSubmit="selectMateralToInput" :limit="limit" :selectData="selectData"></post-Dialog>
</div>
</template>
<script>
import postDialog from "./PostDialog.vue"
export default {
  data () {
    return {
      postId: '',
      name: '',
      labelValue: this.value,
      selectData: [],
      materiaId: '',
      materiaIdSpec: '',
      materiaName: '',
      materiaUnit: ''
    }
  },
  props: {
    limit: Number,
    value: String,
    size: String,
    readonly: {
      type: Boolean,
      default: () => { return false }
    },
    disabled: {
      type: Boolean,
      default: () => { return false }
    }
  },
  components: {
    postDialog
  },
  created () {

  },
  watch: {
    // 第一个进入的方法
    value: {
      handler (newVal) {
        this.postId = ''
        if (newVal) {
          newVal.split(',').forEach((id) => {
            this.$http.get(`/sys/post/queryById?id=${id}`).then(({data}) => {
              this.postId = data.post.name
            })
          })
        }
      },
      immediate: true,
      deep: false
    }
  },
  methods: {
    selectMateralToInput (post) {
      this.selectData = post
      this.labelValue = post.map(post => { return post.id }).join(',')
      this.postId = post.map(post => { return post.name }).join(',')
      this.$emit('getValue', this.labelValue, this.materiaId)
    },
    showpostDialog () {
      this.$refs.postDialog.init()
    }
  }
}
</script>
<style>
  .el-form-item__content .el-input-group {
      vertical-align: middle;
  }
 .el-tag + .el-tag {
    margin-left: 5px;
    margin-bottom: 5px;
  }
</style>
